<template>
    <div class="main-page">
        <div class="main-page-top">
            <page-head-login v-if="hasLogin"></page-head-login>
            <page-head-not-login v-if="!hasLogin"></page-head-not-login>
        </div>
        <div class="main-page-bottom">
            <page-main-login v-if="!hasLogin"></page-main-login>
            <page-main-8 v-if="hasLogin"></page-main-8>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import pageHeadLogin from '../page_head/page_head_login.vue'
import pageHeadNotLogin from '../page_head/page_head_not_login.vue'
import pageMainLogin from '../page_main/page_main_login.vue'
import pageMain8 from '../page_main/page_main_8_business.vue'
export default {
    data: function () {
        return {
            pageTotal: 0
        }
    },
    created () {
    },
    components: {
        pageHeadLogin,
        pageHeadNotLogin,
        pageMainLogin,
        pageMain8
    },
    watch: {
        hasLogin (val) {
            if (!val) {
                this.$router.push('login')
            }
        }
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        },
        hasLogin () {
            return this.$store.state.hasLogin
        },
        showPageNum () {
            return this.$store.state.showPageNum
        }
    },
    methods: {
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.main-page
    position: absolute
    width: 100%
    height: 100%

    .main-page-top
        position: absolute
        top: 0
        left: 0
        height: 64px
        width: 100%

    .main-page-bottom
        position: absolute
        top: 64px
        left: 0
        bottom: 0
        width: 100%
        overflow-y: hidden
        overflow-x: hidden
</style>
